Dr. Yang Ye <Email:yy@runchee.com>
Nov 02, 2017
After laying down the wires, what runs inside?
TCP Session
DHCP Session
The Defense Advanced Research Projects Agency (DARPA) created the TCP/IP model in the 1970s to build ARPANET. ARPANET is a wide area network that preceded the internet.
Demo with nslookup.
Request
GET /index.html HTTP/1.1
Host: www.example.comResponse
HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Content-Type: text/html; charset=UTF-8
Content-Encoding: UTF-8
Content-Length: 138
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Connection: close
<html>
<head>
<title>An Example Page</title>
</head>
<body>
Hello World, this is a very simple HTML document.
</body>
</html> In browser, you can see the green lock in address bar. App doesn’t show it, we just trust that they are using HTTPS.
When you have HTML and URL (Uniform Resource Locator), Web is born.
How this resource is used in the document.
<div class="thumbinner" style="width:302px;">
<a href="/wiki/File:Web_Index.svg" class="image">
<img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/65/Web_Index.svg/300px-Web_Index.svg.png"
width="300" height="154" class="thumbimage" />
</a>
</div>
First generation
Browser => HTML/CSS/JavaScript => HTTP => TCP => IP => Network physical.
We will write in R, which subsequently writes HTML/CSS/JavaScript.
Markdown is for humans to write doc, with minimal added to decorate it, created by John Gruber in collaboration with Aaron Swartz in 2004.
A Markdown-formatted document should be publishable as-is, as plain text,
without looking like it's been marked up with tags or formatting instructions. - John Gruber---
title: My first bitcoin
subtitle: and how I bought a pizza!
author: "Gru"
date: "Jul 9, 2010"
---
# How I bought it
I found someone was selling _10000_ on ebay for __$30__.
I think that's
- cool
- fun
- hacker
# How I used it
I forgot to bring my wallet the other day.
So I used **the bitcoins** to buy some pizza.

More hashtag, deeper level.
# Header1
## Header2
### Header3
Give four spaces before it
if (a > 0) {
print(a)
}
if (a > 0) {
print(a)
}
* First paragraph.
Continued.
* Second paragraph. With a code block, which must be indented
eight spaces:
{ code }
First paragraph. Continued.
Second paragraph. With a code block, which must be indented eight spaces:
Put four more spaces for each level.
* fruits
+ apples
- macintosh
- red delicious
+ pears
* vegetables
+ broccoli
+ chard
Put 4 more spaces for each level.
#. Chapter 1
#. Section 1.1
#. Section 1.2
#. Chapter 2
#. Chapter 3
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
To emphasize some text, surround it with *s or _, like this:
This text is \_emphasized with underscores\_, and this
is \*emphasized with asterisks\*.
Double * or _ produces strong emphasis:
This is \*\*strong emphasis\*\* and \_\_with underscores\_\_.
This text is emphasized with underscores, and this is emphasized with asterisks. Double * or _ produces strong emphasis.
This is strong emphasis and with underscores. A * or _ character surrounded by spaces, or backslash-escaped, will not trigger emphasis.
This ~~is deleted text.~~ This is deleted text.
H~2~O is a liquid. 2^10^ is 1024. H2O is a liquid. 210 is 1024.
Use backtick `. What is the difference between `>>=` and `>>`? What is the difference between >>= and >>?
Note:
A link immediately preceded by a ! will be treated as an image. The link text will be used as the image’s alt text:

Pizza
MathJax. Use laTex syntax. There are many online references.
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
$$\sum_{i=1}^n X_i$$
\[\sum_{i=1}^n X_i\]
---
title: "Data Analysis Report"
author: "Yang Ye"
date: "October 23, 2017"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## Report
```{r cars}
summary(cars)
```
## Including Plots
```{r pressure, echo=FALSE}
plot(pressure)
```
In the header, you can change the output to other types:
word_document
Ctrl+Shift+K or “Knitr”
R Markdown is a extension to Markdown that you can execute code among the code. If you name the file as .Rmd and knit in R Studio.
```{r Calculate_7}
a <- 3
b <- 4
print(a + b)
```## [1] 7
Calculate_7 is the chunk name. It’s optional to give a chunk name. If included, each code chunk needs a distinct name. It’s usually best to give each code chunk a name, for easier debug.
R code can also be inline. For example, to generate a random number everytime, include this `runif(1, 0, 1)`, 0.8516547.
include is to hide both code and result, default is FALSE.
```{r cars, echo = TRUE}
a <- runif(100, 0, 1)
```
```{r plot}
plot(a)
```a <- runif(100, 0, 1)```{r kable}
knitr::kable(
mtcars[1:5, ],
caption = "A knitr kable."
)
```
| mpg | cyl | disp | hp | drat | wt | qsec | vs | am | gear | carb | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Mazda RX4 | 21.0 | 6 | 160 | 110 | 3.90 | 2.620 | 16.46 | 0 | 1 | 4 | 4 |
| Mazda RX4 Wag | 21.0 | 6 | 160 | 110 | 3.90 | 2.875 | 17.02 | 0 | 1 | 4 | 4 |
| Datsun 710 | 22.8 | 4 | 108 | 93 | 3.85 | 2.320 | 18.61 | 1 | 1 | 4 | 1 |
| Hornet 4 Drive | 21.4 | 6 | 258 | 110 | 3.08 | 3.215 | 19.44 | 1 | 0 | 3 | 1 |
| Hornet Sportabout | 18.7 | 8 | 360 | 175 | 3.15 | 3.440 | 17.02 | 0 | 0 | 3 | 2 |
```{r plot1, echo = FALSE}
a <- filter(cars, speed > 4)
plot(a)
```
I removed everything in functions server and ui. This is the minimal Shiny.
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
Let’s add a minimal sidebarLayout
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(sidebarLayout(
sidebarPanel(),
mainPanel()
))
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
fluidPagefluidPage function can take any number of input parameter.
fluidPage(sidebarLayout(
sidebarPanel(),
mainPanel()
))titlePanel("Hello Shiny!"), h1("Introduction to Layout"), h2("Sidebar Layout")library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
h1("Introduction to Layout"),
h2("Sidebar Layout"),
a("A link to Google", href="http://www.google.com"),
tags$ul("About",
tags$li("Who are we"),
tags$li("What we do")
),
tags$ol("Steps",
tags$li("Write"),
tags$li("Run")
)
),
mainPanel(
img(src = "p19-Hero-Image-796x398.jpg")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
fluidPage(
sidebarLayout(position = "right",
sidebarPanel(),
mainPanel()
)
)
Each tag is a function.
h1("A header")
p("some text as a paragraph")
a("A link to Google", href="http://www.google.com")
img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
tags$ul("title", tags$li("Item 1"), tags$li("Item 2"))
tags$ol("Step", tags$li("Item 1"), tags$li("Item 2"))
Note:
www together with the R source file. Place the file under it.tags$img(), even img() is available to use.titlePanel() and wellPanel()
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
h1("Well 1"),
wellPanel(
h2("Well 1.1"),
actionButton("goButton", "Go!")
),
h1("Well 2"),
wellPanel(
h2("Well 2.1"),
actionButton("goButton2", "Go!")
)
),
mainPanel(
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
navlistPanel(
"Header A",
tabPanel("Section 1",
h1("Section 1")),
tabPanel("Section 2",
h1("Section 2")),
"Header B",
tabPanel("Section 3",
h1("Section 3")),
"-----",
tabPanel("Component 5")
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
tabsetPanel(
tabPanel("Plot", h1("plot")),
tabPanel("Summary", h1("summary")),
tabPanel("Image", img(src = "p19-Hero-Image-796x398.jpg"))
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
ui <- fluidPage(
fluidPage(
navbarPage(title = "Runchee Technology",
tabPanel("Product",
titlePanel("Hello!"),
"One more thing!"),
tabPanel("About us",
titlePanel("Hello!"),
"Exordinary people"),
navbarMenu(title = "Contact Us",
tabPanel("Address", "3/4 platform"),
tabPanel("Phone", "+123.456")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
ui <- fluidPage(
fluidPage(
fluidPage(
titlePanel("Hello Shiny!"),
fluidRow(
column(4,
wellPanel(
dateInput("date", "How's weather today?")
)
),
column(6,
h3("Plot"),
wellPanel(plotOutput("distPlot"))
),
column(2, h3("Extra"),
wellPanel(plotOutput("extraPlot"))
)
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
library(shiny)
library(ggplot2)
ui <- fluidPage(
fluidPage(
fluidPage(
title = "Diamonds Explorer",
fluidRow(
column(12,
img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
)
),
hr(),
fluidRow(
column(3,
h4("Diamonds Explorer"),
sliderInput('sampleSize', 'Sample Size',
min=1, max=nrow(diamonds), value=min(1000, nrow(diamonds)),
step=500, round=0),
br(),
checkboxInput('jitter', 'Jitter'),
checkboxInput('smooth', 'Smooth')
),
column(4, offset = 1,
selectInput('x', 'X', names(diamonds)),
selectInput('y', 'Y', names(diamonds), names(diamonds)[[2]]),
selectInput('color', 'Color', c('None', names(diamonds)))
),
column(4,
selectInput('facet_row', 'Facet Row', c(None='.', names(diamonds))),
selectInput('facet_col', 'Facet Column', c(None='.', names(diamonds)))
)
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
---
title: "MFE FE8828 Assignment 1"
date: 2017-11-03
output: html_document
runtime: shiny
---
```{r setup, include = FALSE}
```
```{r, echo = FALSE}
wellPanel("Inputs",
numericInput("fav_num", "What's your favorite number?", 3))
```
This is interactive document.